<template>
    <el-table
            :data="clubs.items"
    >
        <el-table-column
                prop="club_id"
                label="站子ID"
        />
        <el-table-column
                prop="name"
                label="名称"
        />
        <el-table-column
                label="认证身份证名称"
                prop="idcard_name"
        />
        <el-table-column
                label="联系电话"
                prop="phone"
        />
        <el-table-column
                label="用户ID"
                prop="uid"
        />
        <el-table-column
                label="操作"
                width="120px"
        >
            <template slot-scope="club">
                <el-button v-if="club.row.status === 4" type="text" size="mini" disabled>已迁移</el-button>
                <el-button v-if="club.row.status !== 4" type="text" size="mini" @click="onEdit(club.row)">迁移</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts">

    import {Vue,Component,Prop, Watch} from 'vue-property-decorator'
    import {Api} from '@/api/stars'

    @Component({
        name:"AdminSyncClubsView"
    })
    export default class AdminSyncClubsView extends Vue {

        @Prop({
            type:String
        })
        value: string;

        clubs: Api.Stars.GetSyncClubsResponse = {
            items: []
        };

        @Watch('value')
        onValueChange(oldValue:any,newValue:any) {
            this.loadView();
        }

        mounted() {
            this.loadView()
        }

        loadView() {
            Api.Stars.GetSyncClubs({star_id: this.value})
                .then((ack) => {
                    this.clubs = ack
                })
        }

        onEdit(row) {
            this.$router.push({
                path:`/stars/club/editor/new?sync=${row.club_id}`
            })
        }

    }
</script>

<style scoped>

</style>